<template>
  <div class="database-management">
    <el-card class="management-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-folder-opened"></i> 数据库列表</span>
        <el-button type="primary" @click="showCreateDatabaseDialog" icon="el-icon-plus">新建数据库</el-button>
      </div>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm" ref="searchForm" size="small">
          <el-form-item label="数据库名称：">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入数据库名称"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="描述：">
            <el-input
              v-model="searchForm.description"
              placeholder="请输入数据库描述"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据库列表 -->
      <el-table
        :data="filteredTableData"
        style="width: 100%"
        border
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        stripe>
        <el-table-column prop="name" label="数据库名称" min-width="150">
          <template slot-scope="scope">
            <span class="database-name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="授权账户" min-width="120"></el-table-column>
        <el-table-column prop="charset" label="字符集" min-width="200">
          <template slot-scope="scope">
            <el-tag size="small" effect="plain">{{ scope.row.charset }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <div class="status-cell">
              <span class="status-dot" :class="{ 'active': scope.row.status === '使用中' }"></span>
              {{ scope.row.status }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column>
        <el-table-column prop="description" label="描述" min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.description || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleShrinkLog(scope.row)"
              :disabled="scope.row.status !== '使用中'">
              收缩事务日志
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              class="delete-button"
              @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <span class="total-count">共 {{ total }} 条数据</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 创建数据库对话框 -->
    <el-dialog
      title="创建数据库"
      :visible.sync="createDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      @closed="resetCreateForm">
      <el-form :model="createForm" :rules="createRules" ref="createForm" label-width="120px">
        <el-form-item label="数据库名称" prop="name" required>
          <el-input
            v-model="createForm.name"
            placeholder="数据库名称支持字母、数字和下划线">
          </el-input>
        </el-form-item>
        <el-form-item label="字符集" prop="charset" required>
          <el-select v-model="createForm.charset" placeholder="请选择字符集" style="width: 100%">
            <el-option
              v-for="item in charsetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            v-model="createForm.description"
            placeholder="请输入描述信息">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateSubmit" :loading="submitting">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="确认删除"
      :visible.sync="deleteDialogVisible"
      width="400px">
      <div class="delete-confirm-content">
        <i class="el-icon-warning"></i>
        <p>确定要删除该数据库吗？此操作不可恢复。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete" :loading="deleting">确定删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DatabaseManagement',
  data() {
    return {
      // 搜索相关
      searchForm: {
        name: '',
        description: ''
      },
      loading: false,

      // 表格数据
      tableData: [
        {
          name: 'test005',
          account: 'tplus',
          charset: 'SQL_Latin1_General_CP1_CS_AS',
          status: '使用中',
          createTime: '2024-10-15 14:38:00',
          description: '这是一段描述'
        }
      ],

      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 1,

      // 创建数据库对话框
      createDialogVisible: false,
      submitting: false,
      createForm: {
        name: '',
        charset: '',
        description: ''
      },
      createRules: {
        name: [
          { required: true, message: '请输入数据库名称', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_]+$/, message: '数据库名称只能包含字母、数字和下划线', trigger: 'blur' }
        ],
        charset: [
          { required: true, message: '请选择字符集', trigger: 'change' }
        ],
        description: [
          { max: 200, message: '描述长度不能超过200个字符', trigger: 'blur' }
        ]
      },

      // 字符集选项
      charsetOptions: [
        { value: 'Chinese_PRC_CI_AS', label: 'Chinese_PRC_CI_AS' },
        { value: 'SQL_Latin1_General_CP1_CS_AS', label: 'SQL_Latin1_General_CP1_CS_AS' },
        { value: 'UTF8', label: 'UTF8' }
      ],

      // 删除相关
      deleteDialogVisible: false,
      deleting: false,
      currentDeleteItem: null
    }
  },
  computed: {
    filteredTableData() {
      let result = [...this.tableData]

      if (this.searchForm.name) {
        result = result.filter(item =>
          item.name.toLowerCase().includes(this.searchForm.name.toLowerCase())
        )
      }

      if (this.searchForm.description) {
        result = result.filter(item =>
          item.description && item.description.toLowerCase().includes(this.searchForm.description.toLowerCase())
        )
      }

      return result
    }
  },
  methods: {
    // 搜索相关方法
    handleSearch() {
      this.currentPage = 1
      this.getList()
    },
    resetSearch() {
      this.$refs.searchForm.resetFields()
      this.handleSearch()
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 创建数据库相关方法
    showCreateDatabaseDialog() {
      this.createDialogVisible = true
    },
    resetCreateForm() {
      if (this.$refs.createForm) {
        this.$refs.createForm.resetFields()
      }
      this.createForm = {
        name: '',
        charset: '',
        description: ''
      }
    },
    handleCreateSubmit() {
      this.$refs.createForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          // 模拟API调用
          setTimeout(() => {
            this.submitting = false
            this.createDialogVisible = false
            this.$message({
              message: '数据库创建成功',
              type: 'success'
            })
            this.getList()
          }, 1000)
        }
      })
    },

    // 删除相关方法
    handleDelete(row) {
      this.currentDeleteItem = row
      this.deleteDialogVisible = true
    },
    confirmDelete() {
      this.deleting = true
      // 模拟API调用
      setTimeout(() => {
        this.deleting = false
        this.deleteDialogVisible = false
        this.$message({
          message: '数据库删除成功',
          type: 'success'
        })
        this.getList()
      }, 1000)
    },

    // 收缩日志相关方法
    handleShrinkLog(row) {
      this.$message({
        message: '正在收缩事务日志，请稍候...',
        type: 'info'
      })
      // 模拟API调用
      setTimeout(() => {
        this.$message({
          message: '事务日志收缩成功',
          type: 'success'
        })
      }, 2000)
    },

    // 获取列表数据
    getList() {
      this.loading = true
      // 模拟API调用
      setTimeout(() => {
        this.loading = false
      }, 800)
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.database-management {
  padding: 0px;
}

.management-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header i {
  margin-right: 8px;
  font-size: 18px;
}

.search-bar {
  margin-bottom: 20px;
  padding: 18px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.database-name {
  font-family: monospace;
  color: #409EFF;
}

.status-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #909399;
}

.status-dot.active {
  background-color: #67C23A;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.total-count {
  color: #606266;
  font-size: 14px;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: bold;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

/* 删除按钮样式 */
.delete-button {
  color: #F56C6C;
}

.delete-button:hover {
  color: #f78989;
}

/* 删除确认对话框样式 */
.delete-confirm-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}

.delete-confirm-content i {
  font-size: 24px;
  color: #E6A23C;
}

.delete-confirm-content p {
  margin: 0;
  color: #606266;
}

/* 对话框样式优化 */
.el-dialog__header {
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.el-dialog__footer {
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}

.el-dialog__body {
  padding: 30px 20px;
}

/* 加载动画样式 */
.el-loading-spinner .el-icon-loading {
  font-size: 30px;
  color: #409EFF;
}

.el-loading-spinner .el-loading-text {
  color: #409EFF;
  margin: 3px 0;
  font-size: 14px;
}

/* 表单样式优化 */
.el-form--inline .el-form-item {
  margin-right: 20px;
}

.el-form--inline .el-form-item:last-child {
  margin-right: 0;
}

/* 标签样式 */
.el-tag {
  border-radius: 4px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}
</style>
